<!--
 * @Author: Bonnie
 * @Date: 2021-08-30 17:02:25
 * @LastEditTime: 2021-10-11 14:30:24
 * @LastEditors: Bonnie
 * @Description: class基于assets/style的样式
 * @FilePath: /custom/src/components/FluidLayout.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->

// 该组件为常见流式布局 一行展示数量根据页面宽度来自适应
<template>
  <div class="fluid-container full p10 border-box">
    <div class="fluid-item border-box p10" v-for="item in list" :key="'hasValue'+item.id">
      <div>
        <img :src="item.src" alt />
      </div>
      <div class="full-width mt20 text-start p5 border-box">
        <h4>{{item.title}}</h4>
        <div class="info full-width flex flex-between mt5">
          <p :title="item.desc" class="desc single flex1">{{item.desc}}</p>
          <p class="num">数量：{{ item.num}}</p>
        </div>
      </div>
    </div>
    <!-- 兼容一行最多10个元素以内的情况 -->
    <i class="empty-item" v-for="e in 10" :key="'empty'+e"></i>
  </div>
</template>
<script>
export default {
  name: "FluidLayout",
  props: {
    list: {
      type: Array,
      required: true,
      // 对象或数组默认值必须从一个工厂函数获取
      default: () => []
    }
  }
};
</script>
<style lang='scss' scoped>
.fluid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

// item样式
.fluid-item {
  margin-top: 25px;
  width: 240px;
  height: 320px;
  border-radius: 12px;
  background-color: #ccc;
  img {
    width: 100%;
    border-radius: 6px;
  }
  .info {
    .num {
      width: 70px;
    }
  }
}
// 空元素样式
.empty-item {
  width: 240px;
  height: 0px;
}
</style>